<template>
  <div class="page-dialog">
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="35%"
      draggable
      destroy-on-close
      :before-close="handleClose"
    >
      <binGeneralForm v-bind="modelConfig" v-model="formData" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" v-debounce:300="handleConfirmClick"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useStore } from 'vuex'
import binGeneralForm from '@/base-ui/generalForm'
import { binMsg } from '@/global/api.js'
import { isHasChinese } from '@/utils/isHasChinese.js'

const props = defineProps({
  modelConfig: {
    type: Object,
    default: []
  },
  defualtFormData: {
    type: Object,
    default: {}
  }
})

const store = useStore()
// 对话框的显示、标题（父组件直接进行修改即可）
const dialogVisible = ref(false)
const dialogTitle = ref('')

// 存放着表单的值
const formData = ref({})

// 确定新建
const handleConfirmClick = () => {
  binMsg().closeAll()
  // 如果表单有值，则说明是编辑，无则说明是添加
  if (Object.keys(props.defualtFormData).length) {
    editUser()
  } else {
    createUser()
  }
}

// 对话框关闭
const handleClose = () => {
  dialogVisible.value = false
}

// 添加逻辑
const createUser = function() {
  if (isOkForContinue()) {
    // console.log(formData.value)
    // 发起添加信息的请求
    store.dispatch(`${props.modelConfig.moduleName}/createAction`, {
      pageName: props.modelConfig.pageName,
      formData: formData.value
    })
    dialogVisible.value = false
  }
}

// 编辑逻辑
const editUser = function() {
  if (isOkForContinue()) {
    // 发起编辑信息的请求
    formData.value.id = props.defualtFormData.id
    store.dispatch(`${props.modelConfig.moduleName}/editAction`, {
      pageName: props.modelConfig.pageName,
      formData: formData.value
    })
    dialogVisible.value = false
  }
}

// 找到有规则的选项，如果表单的这一选项的值为空则给出提示并返回
const isOkForContinue = function () {
  for (const item of props.modelConfig.formItems) {
    if (item.rules) {
      if (!formData.value[item.field]) {
        binMsg('warning', item.placeholder)
        return false
      }
    }
    // 不包含中文
    if (item.noChinese) {
      // 判断不能包含中文的选中，表单数据中是否包含了中文
      if (isHasChinese(formData.value[item.field])) {
        binMsg('warning', item.label + '不允许包含中文！')
        return false
      }
    }
    // 值为整数
    if (item.isInt) {
      if (!Number.isInteger(Number(formData.value[item.field]))) {
        binMsg('warning', item.label + '必须为整数！')
        return false
      }
    }
    // 去除两边空格
    formData.value[item.field] = formData.value[item.field]
      ? String(formData.value[item.field]).trim()
      : ''
  }
  return true
}

// 当表单数据发生变化时，就获取新的数据（用于点击对话框时，里面的表单是否显示数据）
watch(
  () => props.defualtFormData,
  (newValue) => {
    for (const item of props.modelConfig.formItems) {
      formData.value[`${item.field}`] = newValue[`${item.field}`]
    }
  }
)

defineExpose({
  dialogVisible,
  dialogTitle
})
</script>

<style lang="less" scoped></style>
